import { ComUtils } from "@/utils/Com"
import { Show } from "solid-js"

interface Props {
    onclick?: () => void
    text?: string
    loading?: () => boolean
    class?: string
    children?: any
}

const loadingIcon = ComUtils.getResourceUrl('/icons/loading.svg')
export default function (props: Props) {

    return <button class={`btn inline-flex items-center justify-center gap-1 ${props.class}`} classList={{ 'btn': !props.children, 'btn-disabled': props.loading?.() }} disabled={props.loading?.()} onclick={props.onclick}>
        <Show when={props.children} fallback={<span>
            {props.text}
        </span>}>
            {props.children}
        </Show>
        <img class="w-6 h-6" src={loadingIcon} alt="loading" style={{ 'display': props.loading?.() ? 'block' : 'none' }} />
    </button>
}